<template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</template>

<script>
export default {
  props:{
   total:{
    type:String | Number,
    default:2
    
   },
   pageSize:{
   type: String | Number,
    default:10
   },
   currentPage:{
   type: String | Number,
   default:'1'
   }
  },


  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size = val
        this.$emit('handleSizeChange',val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        this.$emit('handleCurrentChange',val)
      }
    },
    data() {
      return {
       size:this.pageSize,
       page:this.currentPage,

      };
    }
}
</script>

<style>
.el-link{
padding: 0 5px;
}
</style>